<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            /* border: 2px solid deeppink; */
            margin: 200px auto;
            position: relative;
        }
        .box{
            width: 500px;
            height: 50px;
            background-color: rgb(0, 195, 255);

        }
        .box h1{
            text-align: center;
            line-height: 50px;
        }
        #content {
            height: 300px;
            max-width: 500px;
            overflow-y: scroll;
            border: 1px solid deepskyblue;
            font-size: 12px;
            color: #666;
            padding-left: 10px;
        }
        #connect{
            margin-left:100px;
        }
        #close{
            margin-left: 20px;
        }
        input {
            outline: none;
        }
        #nickname{
            width: 200px;
            height: 20px;
        }
        #msg{
            width: 495px;
            display: block;
            max-height: 72px;
            height: 150px;
            font-size: 16px;
            line-height: 24px;
            color: #222;
            outline: none;
            resize: none;
            background: #fff;
            border: 1px #b0b0b0 solid;
        }
        #send{
            width: 80px;
            height: 30px;
            border-radius: 8px;
            border: 1px black solid;
            background-color: black;
            color: #fff;
            position: absolute;
            left: 415px;
            bottom: 5px;
        }
        button{
            cursor:pointer;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box">
            <h1>亚洲男团女团聊天吹逼八卦群聊</h1>
        </div>
        <input type="text" id="nickname" placeholder="输入昵称">
        <button id="connect">连接</button>
        <button id="close">断开</button>
        <div id="content"></div>
        <textarea placeholder="说点什么吧..." resize="none" name="" cols="30" rows="10" id="msg"></textarea>
        <button id="send">发送</button>

    </div>

    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script>
        $("#close").prop("disabled", true);
        $("#msg").prop("disabled", true);
        $("#send").prop("disabled", true);
        //昵称点击事件
        $("#connect").click(function () {
            let nickname = $("#nickname").val();
            if (!nickname) {
                alert("昵称不能为空");
                return
            }
            let ws = new WebSocket("ws://chst.vip:5200");
            ws.onopen = function () {
                console.log("连接成功");
                ws.send(nickname);
            }
            
            $("#close").prop("disabled", false);
            $("#msg").prop("disabled", false);
            $("#send").prop("disabled", false);
            $("#nickname").prop("disabled", true);
            $("#connect").prop("disabled", true);
            $("#send").click(function () {
                ws.send($("#msg").val())
            })
            $("#close").click(function () {
                ws.close();
            })
            //监听
            ws.onmessage = function (e) {
                console.log(e.data);
                $("#content").append($(`<p>${e.data}</p>`));
                $("#content").scrollTop(content.scrollHeight);
            }
            //监听断开
            ws.onclose = function () {
                $("#close").prop("disabled", true);
                $("#msg").prop("disabled", true);
                $("#send").prop("disabled", true);
                $("#nickname").prop("disabled", false);
                $("#connect").prop("disabled", false);
            }
            ws.onerror=function(err){
                console.log(err);
            }
        })
    </script>
</body>

</html>